<template>
  <v-hover v-slot="{ hover }">
    <v-sheet
      class="cur-point overflow-hidden"
      :elevation="hover ? 6 : 2"
      rounded="lg"
      color="thirdary"
      @click="
        $router.push({
          name: 'expert',
          params: {
            id: doctorInfo.id,
          },
        })
      "
    >
      <div class="d-flex justify-center py-5">
        <v-avatar color="primary">
          <v-img :src="doctorInfo.avatar"></v-img>
        </v-avatar>
      </div>
      <div class="text-center">
        <span class="primary--text mr-2">{{ doctorInfo.name }}</span
        ><span
          class="fontblack--text"
          :class="{ 'text-caption': doctorInfo.level.length > 6 }"
          >{{ doctorInfo.level }}</span
        >
      </div>
      <div class="d-flex justify-center">
        <v-rating
          background-color="grey lighten-2"
          color="#FFCB00"
          length="5"
          size="3"
          dense
          half-increments
          :value="doctorInfo.rating"
          readonly
        ></v-rating>
        <span class="grey--text ml-4">{{ doctorInfo.rating }}</span>
      </div>
      <div
        class="text-caption text-center text-no-wrap text-truncate px-5 fontblack--text"
      >
        {{ doctorInfo.hospitalName?doctorInfo.hospitalName:'未填写医院信息' }}
      </div>
      <v-divider class="mx-4 my-2"></v-divider>
      <div
        class="text-truncate text-wrap text-caption px-5 fontblack--text"
        :title="doctorInfo.speciality"
      >
        {{
          doctorInfo.speciality ? doctorInfo.speciality : ""
        }}
      </div>
      <v-card-actions class="d-flex pa-0">
        <v-hover v-slot="{ hover }">
          <v-sheet
            class="col-6 text-center"
            :color="hover ? 'primary' : 'thirdary'"
            :class="{ 'thirdary--text': hover, 'primary--text': !hover }"
            @click.stop="openMessage"
            ><span class="iconfont">&#xe7e7;</span>图文问诊</v-sheet
          >
        </v-hover>
        <v-hover v-slot="{ hover }">
          <v-sheet
            class="col-6 text-center primary--text"
            :color="hover ? 'primary' : 'thirdary'"
            :class="{ 'thirdary--text': hover, 'primary--text': !hover }"
          >
            <span class="iconfont">&#xe614;</span>视话问诊</v-sheet
          >
        </v-hover>
      </v-card-actions>
    </v-sheet>
  </v-hover>
</template>



<script>
import { mapMutations } from "vuex";
export default {
  props: {
    doctorInfo: Object,
  },
  methods: {
    ...mapMutations(["openMessage"]),
  },
};
</script>



<style lang="scss" scoped>
</style>
